<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="detailsContent-box w100">
		<!-- 比赛开始和结束不显示 -->
		<view class="timer-box" v-if="matchInfo?.countDownstatus!=-1&&matchInfo?.countDownstatus!=3">
			<countdownItemVue :status="matchInfo?.countDownstatus" :startDate="matchInfo?.sign_start_date"
				:endDate="matchInfo?.sign_end_date" :matchDate="matchInfo?.match_date" @changeTime="changeTime">
			</countdownItemVue>
		</view>
		<view class="info-box flex-row-center">
			<up-icon name="tags" color="#DBDDDE" size="28rpx"></up-icon>
			<!-- <up-avatar-group :urls="urls" size="34rpx" gap="0.4"></up-avatar-group> -->
			<template>
				<text class="status" v-if="matchInfo?.countDownstatus==3">赛事火热进行中</text>
				<text class="status" v-else-if="matchInfo?.countDownstatus==2">报名结束了</text>
				<text class="status" v-else-if="matchInfo?.countDownstatus==1">正在报名中</text>
				<text class="status" v-else-if="matchInfo?.countDownstatus==0">报名未开始</text>
				<text class="status" v-else>赛事结束了</text>
			</template>
			<text class="tips">{{matchInfo?.join_count}} / {{matchInfo?.people_count}}</text>
		</view>
		<!-- 信息卡片 -->
		<scroll-view class="scroll-view_H" scroll-x="true">
			<view class="card-box flex-row-center">
				<view class="card-item">
					<view class="card-head flex-center">
						<text class="name">费用</text>
						<up-icon name="tags-fill" color="#69BBB0" size="24rpx"></up-icon>
					</view>
					<view class="card-content">
						<text class="icon">￥</text>
						<text class="price">{{matchInfo?.cost}}</text>
						<text class="unit">/人</text>
					</view>
				</view>
				<view class="card-item">
					<view class="card-head flex-center">
						<text class="name">时间</text>
						<up-icon name="clock-fill" color="#69BBB0" size="24rpx"></up-icon>
					</view>
					<view class="card-content">
						<text class="time">{{matchInfo?.match_text}}</text>
					</view>
				</view>
				<view class="card-item" @click="openMap(matchInfo?.lat,matchInfo?.lng)">
					<view class="card-head flex-center">
						<text class="name">地点</text>
						<up-icon name="map-fill" color="#69BBB0" size="24rpx"></up-icon>
					</view>
					<view class="card-content">
						<text class="address">{{matchInfo?.address}}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 用户信息 -->
		<!-- 	<view class="user-info flex-row-center">
			<view class="user-box flex-row-center">
				<image src="@/static/logo.png" class="ava" mode="aspectFill"></image>
				<text class="name">张三李四王麻子</text>
				<image src="@/static/user/captain_sign.png" class="sign-icon" mode=""></image>
			</view>
			<view class="view-box flex-row-center">
				<text class="text">查看更多</text>
				<up-icon name="arrow-right" color="#ACADAE" size="30rpx"></up-icon>
			</view>
		</view> -->
		<view class="user-info flex-row-center">
			<text class="title">{{matchInfo?.name}}</text>
			<view class="btn-box flex-center" v-if="matchInfo?.ordered==1" @click="signBtn">
				<text class="text">立即签到</text>
			</view>
		</view>
		<!-- 文字描述 -->
		<view class="description-box w100">
			<view class="w100" id="description-item" style="margin-bottom: 24rpx;" v-if="matchInfo?.description">
				<text class="name">比赛详情</text>
				<up-parse :tagStyle="tagStyles" :content="matchInfo?.description"></up-parse>
			</view>
			<!-- 	<view class="w100 " v-if="matchInfo?.condition">
				<text class="name">比赛规则</text>
				<up-parse :content="matchInfo?.condition" :tagStyle="tagStyles"></up-parse>
			</view> -->
		</view>

	</view>
	<root-portal>

	</root-portal>
</template>

<script setup>
	import {
		matchInfoStore
	} from '@/stores/match';
	const tagStyles = {
		p: "color:#dedede;font-size:28rpx",
		span: "color:#dedede;font-size:28rpx"
	};
	const matchStore = matchInfoStore();
	const emit = defineEmits(['refreshData', 'getlocationBysign'])
	const matchInfo = computed(() => matchStore.matchInfo);
	const changeTime = () => { //倒计时结束
		emit('refreshData');
	};
	const upCode = ref(null);
	const signCodePop = ref(false);
	const signCode = ref('');
	import countdownItemVue from '@/page_activity/components/countdownItem.vue';
	const openMap = (latitude = 30.615869, longitude = 104.067839) => { //打开地图
		uni.openLocation({
			latitude: parseFloat(latitude),
			longitude: parseFloat(longitude),
			success: function(res) {},
			fail: function(error) {
				console.log(error)
			}
		})
	};
	const signBtn = () => { //签到
		emit('getlocationBysign');
		// uni.scanCode({
		// 	success: (res) => {
		// 		console.log('条码内容：', res.result);
		// 		signRound(res.result);
		// 	}
		// });
	};
	const signRound = async (code) => { //签到接口
		const res = await $Api.match.signRound({
			match_id: matchInfo.value.m_id,
			verify_code: code
		}, true)
		if (res.code === 1) {
			uni.showToast({
				title: '签到成功！'
			});
			setTimeout(() => {}, 600)
		} else {
			uni.$u.toast(res.msg);
		}
	}
</script>
<style lang="scss" scoped>
	.detailsContent-box {
		padding: 0 20rpx;

		.timer-box {
			margin-left: 20rpx;
			margin-bottom: 18rpx;

			.text {
				font-weight: 500;
				font-size: 34rpx;
				color: #DEDEDE;
			}
		}

		.info-box {
			margin-left: 20rpx;

			.status {
				font-weight: 500;
				font-size: 24rpx;
				color: #DBDDDE;
				margin: 0 8rpx;
			}

			.tips {
				font-weight: 500;
				font-size: 24rpx;
				color: #9BDEB5;
			}
		}

		.scroll-view_H {
			width: 100%;
			margin-top: 32rpx;
		}

		.card-box {

			// overflow-x: scroll;
			.card-item {
				width: 240rpx;
				height: 160rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
				border: 2rpx solid #304948;
				padding: 0 16rpx;
				background: #212D2E;
				flex-shrink: 0;

				&:not(:last-child) {
					margin-right: 16rpx;
				}

				.card-head {
					justify-content: space-between;
					height: 52rpx;

					.name {
						font-weight: 500;
						font-size: 24rpx;
						color: $title-color;
					}
				}

				.card-content {
					border-top: 2rpx solid #203332;
					padding-top: 12rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					word-break: break-all;
					-webkit-box-orient: vertical;

					.icon {
						font-weight: bold;
						font-size: 20rpx;
						color: $price-color;
					}

					.price {
						font-weight: bold;
						font-size: 28rpx;
						color: $price-color;
					}

					.unit {
						font-weight: bold;
						font-size: 20rpx;
						color: $price-color;
					}

					.time {
						font-weight: 400;
						font-size: 20rpx;
						color: $title-color;
						line-height: 23rpx;
					}

					.address {
						font-weight: 400;
						font-size: 20rpx;
						line-height: 23rpx;
						color: $title-color;

					}
				}
			}
		}
	}

	.user-info {
		justify-content: space-between;
		margin: 40rpx 0;
		margin-right: 12rpx;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: $name-color;
		}

		.user-box {
			.ava {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}

			.name {
				margin: 0 6rpx 0 16rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: rgba(255, 255, 255, 0.87);
			}

			.sign-icon {
				width: 54rpx;
				height: 30rpx;
			}
		}

		.view-box {
			.text {
				font-weight: 500;
				font-size: 24rpx;
				color: #ACADAE;
			}
		}
	}

	.description-box {
		background: $activityContent-bg-color;
		border-radius: 20rpx;
		padding: 20rpx;
		color: #DEDEDE !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;

		#description-item {
			color: #DEDEDE !important;
			word-wrap: break-word !important;
			overflow-wrap: break-word !important;
			font-size: 28rpx;
		}

		.name {
			color: $title-color;
			font-weight: bold;
			font-size: 30rpx;
			display: block;
			margin-bottom: 16rpx;
			padding-left: 20rpx;
			position: relative;
			display: block;
			width: 100%;
			box-sizing: border-box;

			&:before {
				content: '';
				background: $btn-bg-color;
				width: 12rpx;
				height: 100%;
				border-radius: 4rpx;
				top: 0;
				left: 0;
				position: absolute;
			}

		}

		.text {
			font-weight: 400;
			color: $title-color;
			font-size: 28rpx;
			line-height: 42rpx;

		}
	}

	.btn-box {
		width: 180rpx;
		height: 48rpx;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
		border-radius: 24rpx;
		background: $btn-bg-color;
		flex-shrink: 0;

		.text {
			font-weight: 800;
			font-size: 26rpx;
			color: $btn-text-color;

		}
	}

	// 签到码弹出层
	.signCode-box {
		// width: 480rpx;
		padding: 24rpx;
		box-sizing: border-box;
		flex-direction: column;

		.title {
			font-size: 30rpx;
			color: $name-color;
			font-weight: bold;
			margin-bottom: 24rpx;
		}

		.code-box {
			padding: 16rpx;
			border-radius: 16rpx;
			background-color: #fff;
		}

		.option-box {
			margin-top: 36rpx;
			justify-content: space-evenly;

			.option-btn {
				width: 180rpx;
				height: 48rpx;
				box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
				border-radius: 24rpx;
				background: $btn-bg-color;

				.text {
					font-weight: 600;
					font-size: 26rpx;
					color: $btn-text-color;

				}
			}
		}
	}
</style>